<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchList">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="综合搜索">
                <a-input v-model="requestData.search" placeholder="请输入售后单号、订单号、用户手机号" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="订单类型">
                <a-select v-model="requestData.type" placeholder="请选择" :dropdownStyle="{ zIndex: '5' }">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option :value="10">BOX</a-select-option>
                  <a-select-option :value="20">导购</a-select-option>
                  <a-select-option :value="30">有搭</a-select-option>
                  <a-select-option :value="40">主题盒子</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="售后状态">
                <a-select v-model="requestData.status" placeholder="请选择">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option :value="0">待寄回</a-select-option>
                  <a-select-option :value="1">待仓库收货</a-select-option>
                  <a-select-option :value="2">待退款</a-select-option>
                  <a-select-option :value="3">已成功退款</a-select-option>
                  <a-select-option :value="4">申请驳回</a-select-option>
                  <a-select-option :value="5">取消退款</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="售后创建时间" has-feedback>
                <a-range-picker style="width: 100%" showToday valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" v-model="requestData.regTime" />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <span>
                <a-button type="primary" @click="handleAdd">新建售后单</a-button>
              </span>
            </a-col>
            <a-col :md="12" :sm="24">
              <span :style="{ float: 'right', overflow: 'hidden', marginright: '20px' }">
                <a-button type="primary" @click="searchList">查询</a-button>
                <a-button style="margin-left: 18px" @click="resetList">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-tabs :activeKey="activeTab" @change="changeTabs" class="tab-content">
        <a-tab-pane :key="0">
          <span slot="tab">
            待处理 <span class="num">({{ running }})</span>
          </span>
        </a-tab-pane>
        <a-tab-pane :key="1">
          <span slot="tab">
            已处理 <span class="num">({{ over }})</span>
          </span>
        </a-tab-pane>
      </a-tabs>
      <s-table ref="table" size="default" :rowKey="record => record.refundSn" :columns="columns" :data="loadData" :pagination="paginationProps" :scroll="{ x: 2000 }">
        <span slot="typeStatus" slot-scope="text, record">
          {{ typeStatus[record.type] }}
        </span>

        <span slot="orderStatus" slot-scope="text, record">
          {{ statusType[record.status] }}
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <router-link :to="`/box/afterSalesOrder/examine/${record.refundSn}`" v-if="activeTab == 0">审核</router-link>
            <router-link :to="`/box/afterSalesOrder/examine/${record.refundSn}`" v-if="activeTab == 1">查看</router-link>
          </template>
        </span>
      </s-table>
    </a-card>
    <a-modal v-model="visible" centered title="新建售后单" @ok="handleOk" :width="400" @cancel="cancel">
      <a-input v-model="orderNum" placeholder="请输入需要售后的订单号" class="order" />
    </a-modal>
  </div>
</template>
<script>
import { STable, Ellipsis } from '../components'
import { queryOrder, orderList } from '@/api/box/sales'
import JDate from '@/components/jeecg/JDate'
const columns = [
  {
    title: '售后单号',
    dataIndex: 'refundSn',
    align: 'center'
  },
  {
    title: '订单编号',
    dataIndex: 'orderSn',
    align: 'center'
  },
  {
    title: '物流单号',
    dataIndex: 'trackingNumber',
    align: 'center'
  },
  {
    title: '用户昵称',
    dataIndex: 'nickName',
    align: 'center'
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    align: 'center',
    width: '150px'
  },
  {
    title: '搭配师',
    dataIndex: 'name',
    align: 'center'
  },
  {
    title: '订单类型',
    dataIndex: 'type',
    align: 'center',
    scopedSlots: { customRender: 'typeStatus' }
  },
  {
    title: '状态',
    dataIndex: 'orderStatus',
    align: 'center',
    width: '90px',
    scopedSlots: { customRender: 'orderStatus' }
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    align: 'center',
    width: '120px'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '80px',
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: { STable, Ellipsis, JDate },
  data() {
    this.columns = columns
    return {
      activeTab: 0,
      needTurn: true,
      requestData: {
        regTime: null,
        search: '',
        status: '',
        type: ''
      },
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      running: '',
      over: '',
      loadData: parameter => {
        const queryParam = JSON.parse(JSON.stringify(this.requestData))
        const data = {}

        data.page = parameter
        data.requestData = queryParam
        data.requestData.isOk = this.activeTab
        if (queryParam.regTime && queryParam.regTime.length > 0) {
          data.requestData.startTime = queryParam.regTime[0]
          data.requestData.endTime = queryParam.regTime[1]
        }
        delete queryParam.regTime
        return orderList(data).then(res => {
          if (res.code === 0) {
            const data = {
              data: res.data.data,
              page: res.page
            }
            this.over = res.data.over || 0
            this.running = res.data.running || 0
            res.data.data.forEach(element => {
              element.trackingNumber = element.trackingNumber && element.refundRemark != '买贵退差价' ? element.trackingNumber : '———'
            })

            return data
          } else {
            this.$message.error(res.msg)
            const data = {
              page: {
                pageNo: 0,
                count: 0,
                pageSize: 10
              },
              data: []
            }
            return data
          }
        })
      },
      visible: false,
      orderNum: '', // 售后单号
      typeStatus: {
        10: 'BOX',
        20: '导购',
        30: '有搭',
        40: '主题盒子'
      },
      statusType: {
        0: '待寄回',
        1: '待仓库收货',
        2: '待退款',
        3: '已成功退款',
        4: '申请驳回',
        5: '取消退款'
      }
    }
  },
  watch: {
    $route(to, from) {
      let currentPath = '/box/afterSalesOrder/list'
      let detailPath = '/box/afterSalesOrder/examine'
      if (from.path.includes(detailPath) && to.path.includes(currentPath)) {
        this.$refs.table.refresh()
      } else {
        if (from.path.includes(currentPath) && !to.path.includes(detailPath)) {
          this.$destroy()
        }
        if (to.path.includes(currentPath) && !from.path.includes(detailPath)) {
          this.$refs.table.refresh(true)
        }
      }
    }
  },
  methods: {
    cancel() {
      this.orderNum = ''
      this.visible = false
    },
    handleOk() {
      if (!this.orderNum) {
        this.$message.warning('请填写售后的订单号')
        return
      } else {
        let params = {
          requestData: {
            orderSn: this.orderNum
          }
        }
        queryOrder(params).then(res => {
          if (res.code == 0) {
            this.$router.push(`/box/afterSalesOrder/detail/${this.orderNum}`)
          } else {
            this.$message.warning(res.data)
          }
          this.orderNum = ''
          this.visible = false
        })
      }
    },

    searchList() {
      this.$refs.table.refresh(true)
    },
    resetList() {
      this.requestData.regTime = null
      this.requestData.search = ''
      this.requestData.status = ''
      this.requestData.type = ''

      this.$refs.table.refresh(true)
    },
    handleAdd() {
      this.visible = true
    },
    changeTabs(key) {
      this.activeTab = key
      this.$nextTick(() => {
        this.$refs.table.refresh(true)
      })
    }
  }
}
</script>
<style lang="less" scoped>
@red: #f9222c;
.tab-content {
  .num {
    color: @red;
  }
}
.order {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>

